<template>
	<view class="page">
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		@scroll="scroll" >
			<!-- 搜索框 -->
			<view class="search-wrap">
				<u-search bgColor="#e5e5e5" @change="onSearch" inputAlign="center" height="70" v-model="params.title" :showAction="false"></u-search>
			</view>
			<!-- 选择款 -->
			<view class="tab">
			    <view v-for="(item,itemIndex) in tabList" :key="itemIndex" :class="[{ active: itemIndex === activeIndex },'item']" @tap="onTapItem(item, itemIndex)">
			        <button :class="['but',itemIndex === activeIndex?'butSelect':'butNoSelect',itemIndex==0?'pad1':'pad2']">
					{{ item.label }}</button>
				</view>
			</view>
			<u-tabs :list="tabs" @change="clickTabs" :is-scroll="false" :current="tabsCurrent" active-color="#000000" ></u-tabs>
			<view class="tabs_uline"><u-line color="#ddd"></u-line></view>
			<!-- 视频 -->
			<div class="video-wrap" v-if="params.category==1">
				<view v-for="(item, itemIndex) in courseList" :key="itemIndex" class="video-item">
					<view >
						<video class="video-play" :src="item.file"></video>
					</view>
					<view class="title">
						{{item.title==null?'':item.title}}
					</view>
				</view>
			</div>
			<!-- 资料-->
			<div class="pdf-wrap" v-if="params.category==2">
				<view v-for="(item, itemIndex) in courseList" :key="itemIndex">
					<div class="pdf-item">
						<div class="img-wrap"><image src="https://www.mopkeji.com/uploads/mini/pdf.jpg" mode="widthFix"></image></div>
						<div class="content-wrap">
							<view class="title">{{item.title}}</view>
							<view class="look" @click="openPDF(item.file,item.title)">点击查看>></view>
						</div>
					</div>
					<view class="uline"><u-line color="#ddd"></u-line></view>
				</view>
				
			</div>
			<view class="claer"></view>
			<view class="data-loading" v-if="loading">数据加载中...</view>
			<view class="data-loading" v-if="finished">没有更多了</view>
		</scroll-view>
		
		<!-- 底部导航 -->
		<!-- <u-tabbar v-model="nav_current" :list="nav_list" active-color='#2C2C2C' height="100"></u-tabbar> -->
	</view>


</template>

<script>
	
	export default {
		data() {
			return {
				tabsCurrent: 0,
				tabList: [
					{
						label: '视频资料',
				    },
					{
						label: '文件资料',
				    },
					
				],
				tabs: [{
						name: '技术',
					}, {
						name: '运营',
					}, {
						name: '销售'
					}, {
						name: '经典案例'
					}],
				activeIndex:0,
				loading: false,
				finished: false,
				nav_current: 1,
				params: {
					title: "", // 标题
					category:'1',//类别 1视频 2文件
					type:'1',//类型 1技术 2运营 3销售 4经典案例
					pageNo: 1,
					pageSize: 12
				},
				// nav_list: [{
				// 		pagePath: "/pages/index/index",
				// 		iconPath: "home",
				// 		selectedIconPath: "home-fill",
				// 		text: '首页'
				// 	},
				// 	// {
				// 	// 	pagePath: "/pages/car/color",
				// 	// 	iconPath: "edit-pen",
				// 	// 	selectedIconPath: "edit-pen-fill",
				// 	// 	text: '改色'
				// 	// },
				// 	{
				// 		pagePath: "/pages/car/quote",
				// 		iconPath: "rmb-circle",
				// 		selectedIconPath: "rmb-circle-fill",
				// 		text: '报价'
				// 	},
				// 	{
				// 		pagePath: "/pages/product/product",
				// 		iconPath: "grid",
				// 		selectedIconPath: "grid-fill",
				// 		text: '产品'
				// 	},
				// 	{
				// 		pagePath: "/pages/about/my",
				// 		iconPath: "account",
				// 		selectedIconPath: "account-fill",
				// 		text: '关于我们'
				// 	},
				// ], // 底部导航
				courseList: []
			}
		},
		mounted() {
			this.getList();
		},
		onReady() {
			
		},
		methods: {
			async onTapItem(item, itemIndex,itemParam) {
				this.activeItem=item;
				this.activeIndex = itemIndex;
				this.tabsCurrent=0;
				this.params.category = itemIndex+1;
				this.params.type=1;
				this.params.pageNo = 1;
				this.finished = false;
				this.getList();
			},
			async clickTabs(index) {
				this.tabsCurrent=index;
				this.params.type = index+1;
				this.params.pageNo = 1;
				this.finished = false;
				this.getList();
			},
			toDetail(item) {
				console.log(item);
				uni.navigateTo({
  					url: '/pages/car/caseDetail?id='+item.id
				})
			},
			
			async getList() {
				if (this.finished) return;
				this.loading = true;
				let res = await this.$api.getCourseList(this.params);
				this.loading = false;
				if(!res.success){
					return;
				}
				const {current, pages, records, size, total} = res.result
				if (this.params.pageNo === 1) {
					this.courseList = records;
				} else {
					this.courseList = this.courseList.concat(records)
				}
				this.finished = (current * size >= total)
			},
			scroll(e) {
				console.log(e)
			},
			upper(e) {
				console.log(e)
			},
			lower(e) {
				this.params.pageNo++
				this.getList();
			},
			openPDF(contractUrl,title) {
				uni.navigateTo({
					url: '../component/pdf-preview?url='+contractUrl+'&title='+title,
				})
			},
			
		}	
	}
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-color: #FFF;
}
.scroll-Y {
	height: calc(100vh - 110rpx);
	padding-bottom: 10rpx;
	background: #FFF;
}

.search-wrap {
	padding: 10rpx 10rpx;
	margin: 30rpx 0;
}

.tab{
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	margin-top: 0;
	margin-bottom: 20rpx;
	.item {
		width: 49%;
	}
	.but{
		border-radius: 0rpx;
		font-size: 30rpx;
	}
	.pad1{
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}
	.pad2{
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.butSelect{
		background-color:#000000;
		color: #FFFFFF;
		font-weight: bold;
	}
	.butNoSelect{
		background-color: #FFFFFF;
		color: #000;
	}
}

.tabs_uline{
	margin-bottom: 20rpx;
	margin-top: -6rpx;
}

.video-wrap {
	// display: flex;
	// align-content: flex-start;
	// padding: 0 20rpx;
	// flex-wrap: wrap;
	// margin: 10rpx;
	// margin-top: 0;
	// min-height: 600rpx;
	
	.video-item {
		float: left;
		width: 50%;
		padding: 0 20rpx;
		// margin-right: 3%;
		// padding: 0rpx 0rpx 20rpx 0rpx;
		// border-radius: 14rpx;
		// box-shadow: 0px 7px 10px -10px #000000d4;
		// background-color: #fff;
		// margin-bottom: 24rpx;
	}
	.video-play{
		width: 100%;
	}
	.title {
		color: #555;
		text-align: center;
		font-size: 28rpx;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		padding: 0rpx 30rpx;
	}
}
.pdf-wrap {
	.pdf-item{
		display: flex;
		align-content: flex-start;
		margin: 30rpx 0;
	}
	
	.img-wrap{
		width: 90rpx;
		padding: 10rpx;
	}
	.content-wrap{
		padding-left: 20rpx;
		.title{
			font-size: 30rpx;
			margin: 10rpx 0;
		}
		.look{
			color: blue;
			font-size: 24rpx;
		}
	}
	.uline{
		// margin: 10rpx 0 10rpx;
	}
}
.claer{
	clear: both;
}
.data-loading {
	margin-top: 30rpx;
	text-align: center;
	color: gray;
	font-size: 24rpx;
}
</style>
